<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
</head>
<style>
    * {
        padding: 0;
        list-style: none;
    }
    ul {
        border: 1px solid #ccc;
        padding: 10px;
        width: 90px;
    }
</style>
<body>
    <!-- 根据排名显示tag -->
    <div id="app">
        <ul>
            <li v-for='item,index in list'>
                <div>
                    <span v-if='index == 0' style="background-color: red;padding: 0 5px;padding-top:3px;">{{index + 1}}</span>
                    <span v-else-if='index == 1' style="background-color: #ccc;padding: 0 5px;padding-top:3px;">{{index + 1}}</span>
                    <span v-else-if='index == 2' style="background-color: yellow;padding: 0 5px;padding-top:3px;">{{index + 1}}</span>
                    <span v-else style="padding: 0 5px;padding-top:3px;">{{index + 1}}</span>
                    <span>{{item.name}}</span>
                </div>
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:'#app',
            data(){
                return {
                    list:[{
                        id:1,
                        name:'剑来'
                    },{
                        id:2,
                        name:'渡劫之王'
                    },{
                        id:3,
                        name:'大国名厨'
                    },{
                        id:4,
                        name:'剑仙在此'
                    },{
                        id:5,
                        name:'剑仙在此'
                    }]
                }
            }
        })
    </script>
</body>
</html>